{% extends 'base.html' %}
{% load static %}
{% block content %}
    <style>span:hover{cursor: pointer} * {z-index: 1;} .notclick {pointer-events: none;} </style>
    {% include 'randomSentence.html' %}

    <div id="formBox">
        {% comment %}验证码{% endcomment %}
        <div id="yzm" style="z-index: 10; border: 1px solid #FFFFFF;background-color:rgba(66, 66, 66, .5);line-height: 30px;border-radius: 10px;   position: absolute; width: 83px; top:205px; height: 30px;font-size: 14px;right:0;color: #FFFFFF;text-align: center;cursor: pointer">获取验证码</div>
        <div class="logo_box">
            {% block h3 %}
            {% endblock %}
            <hr style="margin-bottom: 50px;">
            <form action="#">
                <div class="input_outer">
                    <span class="iconfont">&#xe684;</span>
                    <input name="telNum" class="text" style="color: #FFFFFF !important" type="tel"
                           placeholder="请输入手机号码" maxlength="11" minlength="11" required>
                </div>
                <div class="input_outer">
                    <span class="iconfont">&#xe619;</span>
                    <input name="yzm" class="text" style="color: #FFFFFF !important" type="text" required maxlength="4"
                           minlength="4"
                           placeholder="请输入验证码">
                </div>
                <div class="input_outer">
                    <span class="iconfont">&#xe728;</span>
                    <input name="logpass" class="text"
                           style="color: #FFFFFF !important; position:absolute; z-index:100;" value="" required
                           minlength="6"
                           type="password" placeholder="请输入密码(数字,字母,下划线组成)">
                </div>
                <div id="register-button" class="mb2">
                    <a class="act-but submit" href="javascript:" style="color: #FFFFFF;width: 100%;height: 100%;">
                        <button type="submit"
                                style="width: 100%;height: 100%;background-color: transparent;border: none">
                            {% block contentInBu %}

                            {% endblock %}
                        </button>
                    </a>
                </div>
            </form>
        </div>
            <a href="{% url 'app:index' %}" style="position: absolute;font-size: 20px!important;display: inline-block;bottom: 20px;right: 20px;">回到首页</a>

    </div>
    <script>
        window.onload = function () {
            function checkForm() {
                let tel = document.getElementsByName('telNum')[0];
                let pwd = document.getElementsByName('logpass')[0];
                let yzm = document.getElementsByName('yzm')[0];
                let telValue = tel.value;
                let pwdValue = pwd.value;
                let yzmValue = yzm.value;
                {% comment %}检验电话号码是否合格{% endcomment %}
                if (!/^[1][345789][0-9]{9}$/.test(telValue)) {
                        popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">请输入正确的电话号码!</div>`);
                } else if (!/^[0-9]{4}$/.test(yzmValue)) {
                    popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">请正确填写验证码!</div>`);
                } else if (pwdValue.length <= 6) {
                     popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">密码长度至少为6位.</div>`);
                } else if (!(/[0-9]/.test(pwdValue) && /[a-zA-Z]/.test(pwdValue))) {
                    popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">密码至少由数字,字母组成!</div>`);
                }
                else {
                    $ajax(
                        'post',
                        {% url 'app:register' %},
                        {
                            'tel': telValue,
                            'yzm': yzmValue,
                            'pwd': pwdValue,
                            'forgetPwd':'{% block forgetPwd1 %}{% endblock %}',
                        },
                        function (msg) {
                            popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">${JSON.parse(msg)['msg']}</div>`);
                            {% comment %}如果注册成功就切换到登录页面{% endcomment %}
                            if (JSON.parse(msg)['msg'] === '注册成功,可以直接登录!') {
                                location.assign('{% url "app:login" %}');
                            }
                        },
                        function (msg) {
                            popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">${JSON.parse(msg)['msg']}</div>`);
                        }
                    )

                }
            }

            {% comment %}点击获取验证码{% endcomment %}
            var yzm = document.getElementById('yzm');
            yzm.onclick = function () {
                let tel = document.getElementsByName('telNum')[0];
                let telValue = tel.value;
                if (!/^[1][345789][0-9]{9}$/.test(telValue)) {
                    popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">请输入正确的电话号码!</div>`);
                } else {
                    {% comment %}请求后端发送验证码{% endcomment %}
                    $ajax('post',
                        '{% url "app:sendCode" %}',
                        {
                            'tel': telValue,
                            'forgetPwd':'{% block forgetPwd2 %}{% endblock %}'
                        },
                        function (msg) {
                            msg = JSON.parse(msg)['msg'];
                            popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">${msg}</div>`);

                            if (msg !== '该号码已注册,可以直接登录!' && msg !== '该号码还未注册!') {
                                let timeOut = 60; //计时器60秒
                                yzm.className = 'notclick';
                                yzm.style.backgroundColor = 'red';
                                let intervalDemo = setInterval(function () {
                                    timeOut -= 1;
                                    yzm.innerHTML = timeOut + '秒';
                                    if (timeOut <= 0) {
                                        yzm.innerHTML = '获取验证码';
                                        yzm.className = '';
                                        yzm.style.backgroundColor = 'rgba(66, 66, 66, .5)';
                                        clearInterval(intervalDemo);
                                    }

                                }, 1000);
                            }
                        },
                        function (msg) {
                             popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">${JSON.parse(msg)['msg']}</div>`);
                        })
                }
            }
            {% comment %}点击注册{% endcomment %}
            var registerButton = document.getElementById('register-button');
            registerButton.onclick = function () {
                checkForm();
            }
        }
    </script>


{% endblock %}







